this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};(function(t,e,i,s,n,a,o){"use strict";const r={LARGE:"large",MEDIUM:"medium",SMALL:"small",TINY:"tiny"};const l={[r.LARGE]:{width:46,lineSize:5},[r.MEDIUM]:{width:34,lineSize:4},[r.SMALL]:{width:20,lineSize:3},[r.TINY]:{width:14,lineSize:2}};const u={name:"StackUpload",inject:["widgetOptions"],components:{UploadLoader:n.UploadLoader},props:{items:{type:Array,required:true},queueItems:{type:Array,required:true}},emits:["showPopup","abortUpload"],computed:{StackWidgetSize:()=>r,uploadFileTitle(){if(this.queueItems.length>1){return a.Loc.getMessage("STACK_WIDGET_FILES_UPLOADING")}else{return a.Loc.getMessage("STACK_WIDGET_FILE_UPLOADING")}},progress(){if(this.queueItems.length===0){return 0}const t=this.queueItems.reduce(((t,e)=>t+e.progress),0);return Math.floor(t/this.queueItems.length)},progressOptions(){const{width:t,lineSize:e}=l[this.widgetOptions.size];return{width:t,lineSize:e,progress:Math.max(this.progress,10)}}},template:`\n\t\t<div class="ui-uploader-stack-upload" @click="$emit('showPopup')">\n\t\t\t<div class="ui-uploader-stack-upload-box">\n\t\t\t\t<div \n\t\t\t\t\tclass="ui-uploader-stack-upload-abort" \n\t\t\t\t\t:title="$Bitrix.Loc.getMessage('STACK_WIDGET_ABORT_UPLOAD')"\n\t\t\t\t\t@click.stop="$emit('abortUpload')"\n\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t\t<div class="ui-uploader-stack-upload-content">\n\t\t\t\t\t<div class="ui-uploader-stack-upload-loader">\n\t\t\t\t\t\t<UploadLoader v-bind="progressOptions" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="ui-uploader-stack-upload-progress">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if="widgetOptions.size === StackWidgetSize.LARGE"\n\t\t\t\t\t\t\tclass="ui-uploader-stack-upload-title"\n\t\t\t\t\t\t>{{ uploadFileTitle }}</div>\n\t\t\t\t\t\t<div class="ui-uploader-stack-upload-percent">{{ progress }}%</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if="queueItems.length === 1 && widgetOptions.size === StackWidgetSize.LARGE"\n\t\t\t\t\t\t\tclass="ui-uploader-stack-upload-stats"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class="ui-uploader-stack-upload-total">{{\n\t\t\t\t\t\t\t\tqueueItems.length ? queueItems[0].sizeFormatted : ''\n\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass="ui-uploader-stack-upload-menu"\n\t\t\t\t\t:title="$Bitrix.Loc.getMessage('STACK_WIDGET_OPEN_FILE_GALLERY')"\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t</div>\n\t`};const p={name:"StackLoad",emits:["showPopup"],template:`\n\t\t<div class="ui-uploader-stack-load" @click="$emit('showPopup')">\n\t\t\t<div class="ui-uploader-stack-load-icon"></div>\n\t\t</div>\n\t`};const d={[r.LARGE]:36,[r.MEDIUM]:27,[r.SMALL]:19,[r.TINY]:15};const c={name:"StackPreview",inject:["widgetOptions"],components:{FileIcon:n.FileIcon},props:{items:{type:Array,required:true}},emits:["showPopup"],computed:{FileStatus:()=>s.FileStatus,Sizes:()=>r,item(){const t=this.items.find((t=>t.status!==s.FileStatus.LOAD_FAILED||t.status!==s.FileStatus.UPLOAD_FAILED));return t||{}},fileIconSize(){return d[this.widgetOptions.size]},errorsCount(){return this.items.reduce(((t,e)=>{if(e.status===s.FileStatus.LOAD_FAILED||e.status===s.FileStatus.UPLOAD_FAILED){return t+1}else{return t}}),0)}},template:`\n\t\t<div class="ui-uploader-stack-preview" :class="{'--image': item.isImage}" @click="$emit('showPopup')">\n\t\t\t<div class="ui-uploader-stack-preview-box">\n\t\t\t\t<template v-if="item.failed">\n\t\t\t\t\t<div class="ui-uploader-stack-preview-error"></div>\n\t\t\t\t</template>\n\t\t\t\t<template v-else-if="item.previewUrl">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass="ui-uploader-stack-preview-image"\n\t\t\t\t\t\t:class="{ '--default': item.previewUrl === null }"\n\t\t\t\t\t\t:style="{ backgroundImage: item.previewUrl !== null ? 'url(' + item.previewUrl + ')' : '' }">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-if="items.length > 1" class="ui-uploader-stack-preview-stats">\n\t\t\t\t\t\t<span class="ui-uploader-stack-preview-total">{{ items.length }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-else>\n\t\t\t\t\t<template v-if="item.name && item.status !== FileStatus.LOADING">\n\t\t\t\t\t\t<div class="ui-uploader-stack-preview-file-icon">\n\t\t\t\t\t\t\t<FileIcon :name="item.extension" :size="fileIconSize"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tv-if="[Sizes.LARGE, Sizes.MEDIUM].includes(widgetOptions.size)"\n\t\t\t\t\t\t\t:title="item.originalName"\n\t\t\t\t\t\t\tclass="ui-uploader-stack-preview-file-name"\n\t\t\t\t\t\t>{{\n\t\t\t\t\t\t\titems.length > 1\n\t\t\t\t\t\t\t? this.$Bitrix.Loc.getMessage('STACK_WIDGET_FILE_COUNT', { '#count#': items.length })\n\t\t\t\t\t\t\t: item.originalName\n\t\t\t\t\t\t}}</div>\n\t\t\t\t\t\t<div \n\t\t\t\t\t\t\tv-if="items.length > 1 && [Sizes.SMALL, Sizes.TINY].includes(widgetOptions.size)"\n\t\t\t\t\t\t\tclass="ui-uploader-stack-preview-stats">\n\t\t\t\t\t\t\t<span class="ui-uploader-stack-preview-total">{{ items.length }}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template v-else>\n\t\t\t\t\t\t<div class="ui-uploader-stack-preview-file-default"></div>\n\t\t\t\t\t</template>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclass="ui-uploader-stack-upload-menu"\n\t\t\t\t:title="$Bitrix.Loc.getMessage('STACK_WIDGET_OPEN_FILE_GALLERY')"\n\t\t\t></div>\n\t\t</div>\n\t`};const m={name:"StackDropArea",inject:["uploader","widgetOptions"],data(){return{isHovering:false}},computed:{StackWidgetSize:()=>o.StackWidgetSize,uploadFileTitle(){if(this.uploader.shouldAcceptOnlyImages()){if(this.uploader.isMultiple()){return a.Loc.getMessage("STACK_WIDGET_UPLOAD_IMAGES")}else{return a.Loc.getMessage("STACK_WIDGET_UPLOAD_IMAGE")}}else{if(this.uploader.isMultiple()){return a.Loc.getMessage("STACK_WIDGET_UPLOAD_FILES")}else{return a.Loc.getMessage("STACK_WIDGET_UPLOAD_FILE")}}},dragFileHint(){if(this.uploader.isMultiple()){return a.Loc.getMessage("STACK_WIDGET_DRAG_FILES_HINT")}else{return a.Loc.getMessage("STACK_WIDGET_DRAG_FILE_HINT")}}},mounted(){this.uploader.assignDropzone(this.$refs.container);this.uploader.assignBrowse(this.$refs.container)},template:`\n\t\t<div\n\t\t\tclass="ui-uploader-stack-drop-area"\n\t\t\tref="container"\n\t\t\t:class="{ '--hover': isHovering }"\n\t\t\t@mouseenter="isHovering = true"\n\t\t\t@mouseleave="isHovering = false"\n\t\t\t@dragleave="isHovering = false"\n\t\t>\n\t\t\t<div class="ui-uploader-stack-drop-area-content">\n\t\t\t\t<div class="ui-uploader-stack-drop-area-icon"></div>\n\t\t\t\t<div\n\t\t\t\t\tv-if="[StackWidgetSize.LARGE, StackWidgetSize.MEDIUM].includes(widgetOptions.size)"\n\t\t\t\t\tclass="ui-uploader-stack-drop-area-title"\n\t\t\t\t>{{ uploadFileTitle }}</div>\n\t\t\t\t<div\n\t\t\t\t\tv-if="widgetOptions.size === StackWidgetSize.LARGE"\n\t\t\t\t\tclass="ui-uploader-stack-drop-area-hint"\n\t\t\t\t>{{ dragFileHint }}</div>\n\t\t\t</div>\n\t\t</div>\n\t`};const h=t=>t.status===s.FileStatus.LOADING;const g={name:"StackWidget",extends:s.VueUploaderComponent,components:{TileList:n.TileList,ErrorPopup:n.ErrorPopup,StackUpload:u,StackLoad:p,StackPreview:c,StackDropArea:m},mixins:[n.DragOverMixin],data:()=>({popupContentId:null,queueItems:[],enableAnimation:true,dragMode:false,isMounted:false}),computed:{containerClasses(){return[{"--multiple":this.uploader.isMultiple(),"--only-images":this.uploader.shouldAcceptOnlyImages(),"--many-items":this.items.length>1},`--${this.widgetOptions.size}`]},currentComponent(){if(this.items.length===0||this.dragOver){if(this.dragOver){this.dragMode=true}return m}if(this.queueItems.length>0){return u}if(this.items.some(h)){return p}return c},currentComponentProps(){if(this.currentComponent===m||this.currentComponent===p){return{}}else if(this.currentComponent===u){return{items:this.items,queueItems:this.queueItems}}else if(this.currentComponent===c){return{items:this.items}}},error(){if(this.uploaderError){return this.uploaderError}else if(this.errorsCount>0){return a.Loc.getMessage("STACK_WIDGET_FILE_UPLOAD_ERROR")}return null},errorsCount(){return this.items.reduce(((t,e)=>{if(e.status===s.FileStatus.LOAD_FAILED||e.status===s.FileStatus.UPLOAD_FAILED){return t+1}else{return t}}),0)},errorPopupOptions(){return{bindElement:this.$refs.item,bindOptions:{position:"top"},darkMode:true,offsetTop:3,background:"#d2000d",contentBackground:"transparent",contentColor:"white",padding:this.uploaderError===null?10:20,closeIcon:this.uploaderError!==null}}},watch:{currentComponent(t,e){if(this.dragOver){this.enableAnimation=false}else if(e===m&&this.dragMode){this.enableAnimation=false}else if(e===c){this.enableAnimation=false}else{this.dragMode=false;this.enableAnimation=true}},items:{handler(){if(this.items.length===0&&this.popup){this.popup.close()}},deep:true}},created(){this.popup=null;this.adapter.subscribe("Uploader:onUploadStart",(()=>{this.items.forEach((t=>{if(t.origin===s.FileOrigin.CLIENT&&t.queued!==true){t.queued=true;this.queueItems.push(t)}}))}));this.adapter.subscribe("Uploader:onUploadComplete",(()=>{this.queueItems=[]}));this.adapter.subscribe("Item:onAdd",(t=>{this.uploaderError=null;if(this.uploader.getStatus()===s.UploaderStatus.STARTED){const e=t.getData().item;e.queued=true;this.queueItems.push(t.getData().item)}}));this.adapter.subscribe("Item:onRemove",(t=>{this.uploaderError=null;const e=t.getData().item;const i=this.queueItems.indexOf(e);if(i>=0){this.queueItems.splice(i,1)}}))},mounted(){this.uploader.assignBrowse(this.$refs["add-button"]);this.isMounted=true},methods:{showPopup(){if(!this.popup){const t="stack-uploader-"+a.Text.getRandom().toLowerCase();this.popup=new e.Popup({width:750,height:400,draggable:true,titleBar:a.Loc.getMessage("STACK_WIDGET_POPUP_TITLE"),content:`<div id="${t}"></div>`,cacheable:false,closeIcon:true,closeByEsc:true,resizable:true,minWidth:450,minHeight:300,events:{onDestroy:()=>{this.popup=null;this.popupContentId=null}},buttons:[new i.CloseButton({onclick:()=>this.popup.close()})]});this.popupContentId=`#${t}`}this.popup.show()},abortUpload(){const t=Array.from(this.queueItems);this.queueItems=[];t.forEach((t=>{this.uploader.removeFile(t.id)}))},handlePopupDestroy(t){if(this.uploaderError===t){this.uploaderError=null}}},template:`\n\t\t<div class="ui-uploader-stack-widget" :class="containerClasses" v-drop>\n\t\t\t<Teleport v-if="popupContentId !== null" :to="popupContentId">\n\t\t\t\t<TileList :items="items" />\n\t\t\t</Teleport>\n\t\t\t<div class="ui-uploader-stack-item" ref="item">\n\t\t\t\t<transition\n\t\t\t\t\t:leave-active-class="enableAnimation ? 'ui-uploader-stack-item-leave-active' : ''" \n\t\t\t\t\t:leave-to-class="enableAnimation ? 'ui-uploader-stack-item-leave-to' : ''" \n\t\t\t\t\tmode="out-in"\n\t\t\t\t>\n\t\t\t\t\t<keep-alive>\n\t\t\t\t\t\t<component\n\t\t\t\t\t\t\t:is="currentComponent"\n\t\t\t\t\t\t\tv-bind="currentComponentProps"\n\t\t\t\t\t\t\t@showPopup="showPopup"\n\t\t\t\t\t\t\t@abortUpload="abortUpload"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</keep-alive>\n\t\t\t\t</transition>\n\t\t\t</div>\n\t\t\t<div v-if="uploader.isMultiple()" ref="add-button" class="ui-uploader-stack-add-btn"></div>\n\t\t</div>\n\t\t<ErrorPopup\n\t\t\tv-if="error !== null && isMounted"\n\t\t\t:error="error"\n\t\t\t:popup-options="errorPopupOptions"\n\t\t\t@onDestroy="handlePopupDestroy"\n\t\t/>\n\t`};class v extends s.VueUploaderWidget{constructor(t,e){const i=a.Type.isPlainObject(e)?Object.assign({},e):{};super(t,i)}getRootComponent(){return g}}t.StackWidget=v;t.StackWidgetComponent=g;t.StackWidgetSize=r})(this.BX.UI.Uploader=this.BX.UI.Uploader||{},BX.Main,BX.UI,BX.UI.Uploader,BX.UI.Uploader,BX,BX.UI.Uploader);
//# sourceMappingURL=ui.uploader.stack-widget.bundle.map.js